// @ts-nocheck
import {useEffect, useState} from 'react'

import {Modal, Form, Input, message} from 'antd'
import {createAddress, modifyAddress} from '@/services/address'
import DistrictSelect from '@/components/Select/DistrictSelect'
import SubDistrictSelect from '@/components/Select/SubDistrictSelect'
import CommunitySelect from "@/components/Select/CommunitySelect";


const Index = (props) => {
  const [form] = Form.useForm()
  const [district, setDistrict] = useState(null)
  const [subDistrict,setSubDistrict] = useState(null)
  const [community,setCommunity] = useState(null)
  const [back,setBack] = useState(true)
  const {visible, onClose, onOk, mode, data} = props
  useEffect(() => {
    if (visible) {
      if (mode === 'modify') {
        setDistrict(data.district_id)
        setSubDistrict(data.subdistrict_id)
        setCommunity(data.community_id)
        form.setFieldsValue({
          name: data.name,
          district_id: data.district_id,
          subdistrict_id: data.subdistrict_id,
          community_id: data.community_id
        })

      }
    }
  }, [visible])
  const onCommunitySelect = (e) => {
    const {district_id, subdistrict_id} = e
    setBack(true)
    setSubDistrict(subdistrict_id)
    setDistrict(district_id)

  }
  const handleOk = () => {
    form.validateFields().then(values => {
      if (mode === 'create') {
        createAddress(values).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error('新建失败！').then()
          }
        })

      } else {
        modifyAddress({...values, address_id: data.address_id}).then(res => {
          if (res.status === 200) {
            message.success(res.message).then()
            onOk()
          } else {
            message.error('修改失败！').then()
          }
        })
      }
      form.resetFields()
    })
  }
  return (
    <Modal
      title={mode === 'create' ? '新建蓝牌地址' : '修改蓝牌地址'}
      maskClosable={false}
      destroyOnClose
      width={'20vw'}
      visible={visible}
      onCancel={() => {
        form.resetFields();
        onClose()
      }}
      onOk={handleOk}
    >
      <Form
        form={form}
        labelCol={{span: 6}}
        wrapperCol={{span: 16}}
        autoComplete="off"
        onV
      >
        <Form.Item
          label="蓝牌地址"
          name="name"
          rules={[{required: true, message: '请输入蓝牌地址！'}]}
        >
          <Input placeholder={'例：月星中央公园1号楼1单元302'}/>
        </Form.Item>

        <Form.Item
          label="所属区域"
          name="district_id"
          rules={[{required: true, message: '请输入所属区域！'}]}
        >
          <DistrictSelect onChange={(e) => {
            setBack(false);
            setDistrict(e)
          }} defaultValue={district}/>
        </Form.Item>
        <Form.Item
          label="所属街道"
          name="subdistrict_id"
          rules={[{required: true, message: '请输入所属街道！'}]}
        >
          <SubDistrictSelect  onChange={(e) => {
            setBack(false);
            setSubDistrict(e)
          }} district={district} defaultValue={subDistrict} back={back}/>
        </Form.Item>
        <Form.Item
          label="所属园区"
          name="community_id"
          rules={[{required: true, message: '请输入所属园区！'}]}
        >
          <CommunitySelect onSelect={(e) => onCommunitySelect(e)} onChange={(e) => {
            setBack(false);
            setCommunity(e)
          }}
                           subDistrict={subDistrict} district={district} defaultValue={community} back={back}/>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Index;
